<script lang="ts" setup>
import { ref } from 'vue';
import { treeNodeProps, treeNodeEmits } from './tree-node';
//import WindowsTreeNode from './tree-node.vue';
const props = defineProps(treeNodeProps);
const emits = defineEmits(treeNodeEmits);
defineOptions({ name: 'WindowsTreeNode' });
let index = props.index ? props.index : 0;
index += 1;
const handleNodeClick = (node: any) => {
  if (node.Component) {
    emits('app-click', node);
  }
  node.Expanded = !node.Expanded;

  // if ((node['Children'] && node['Children'].length > 0) || (node['Apps'] && node['Apps'].length > 0)) {
  //   node.Expanded = !node.Expanded;
  // } else {
  //   emits('app-click', node);
  // }
};
const _icon = (name: string) => {
  return new URL('/src/assets/module/' + name + '.png', import.meta.url).href;
};
</script>

<template>
  <div class="windows-tree-node" v-for="item in props.data">
    <div class="windows-tree-node__content" @click="handleNodeClick(item)" :style="{ paddingLeft: (index - 1) * 30 + 'px' }">
      <div class="windows-tree-node__label">
        <template v-if="item.Component">
          <el-image :src="item['Icon']" style="width: 25px" fit="contain" />
        </template>
        <template v-else>
          <el-image :src="_icon('folder')" style="width: 25px" fit="contain" />
        </template>
        <span>{{ item['Name'] }}</span>
      </div>
      <!-- <el-icon v-if="item['Children'] && item['Children'].length > 0"><ArrowRightBold /></el-icon> -->
    </div>
    <div v-if="item['Apps'] && item['Apps'].length > 0" class="windows-tree-node__children" :style="{ display: item['Expanded'] == true ? 'block' : 'none' }">
      <windows-tree-node :data="item['Apps']" :index="index" @app-click="handleNodeClick"></windows-tree-node>
    </div>
    <div v-if="item['Children'] && item['Children'].length > 0" class="windows-tree-node__children" :style="{ display: item['Expanded'] == true ? 'block' : 'none' }">
      <windows-tree-node :data="item['Children']" :index="index" @node-click="handleNodeClick"></windows-tree-node>
    </div>
  </div>
</template>

<style scoped lang="scss">
.windows-tree-node {
  margin-bottom: 5px;
}
.windows-tree-node:last-child {
  margin-bottom: 0px;
}
.windows-tree-node__content {
  display: flex;
  align-items: center;
  //padding: 2px;
  cursor: pointer;
  border-radius: 3px;
}
.windows-tree-node__label {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 2px;
}
.windows-tree-node__content:hover {
  background: rgba(81, 88, 111);
}
.windows-tree-node__content span {
  margin-left: 8px;
}
</style>
